import React from 'react'


import  '../styles/demo1.css'

export default class StateForm extends React.Component {


    constructor() {
        super()

        this.text = React.createRef();
        this.pwd = React.createRef();
        this.phone = React.createRef();


    }



    handleSubmit = (e) => {
        e.preventDefault()

        console.log(this.text.current.value)
        console.log(this.pwd.current.value)
        console.log(this.phone.current.value)


      this.text.current.style.color='red'
      this.pwd.current.style.backgroundColor='pink'
      this.phone.current.style.color='blue'




    }




    render() {
        return (
            <div className='box'>

                {/*  react  中 设置类名不能用class  需要用 className   */}

                <h3 >  非受控组件</h3>

                <form onSubmit={this.handleSubmit}>
                    <label>
                        名字:
              <input type="text" ref={this.text}   className='inputs'/>
                    </label>

                    <label>
                        密码:
              <input type="password" ref={this.pwd} />
                    </label>

                    <label>
                        密码:
                  <input type="phone" ref={this.phone} />
                    </label>



                    <input type="submit" value="提交" />
                </form>


            </div>
        )
    }
}
